<!--
  Generated template for the DevicePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-title>设备列表</ion-title>
    <ion-buttons i-power="device_add" end>
      <button ion-button (click)="pToDeviceAdd()" >
        添加
      </button>
    </ion-buttons>
  </ion-navbar>
  <div class="search-bar-box">
    <a class="nc-panel" (click)="toggleFarmSearchPanel()">{{filterParams.farmName}} <ion-icon name="arrow-down"></ion-icon></a>
    <div class="nc-more-panel" [ngClass]="{'open':filterParams.farmPanelFlag}" >
      <a href="#" (click)="chooseFilterFarm(null,'全部农场')">全部农场</a>
      <a href="#" (click)="chooseFilterFarm(item.id, item.name)" *ngFor="let item of farmArr">{{item.name}}</a>
    </div>
  </div>

</ion-header>
<div class="search-bar-mask" [ngClass]="{'open':filterParams.farmPanelFlag}"></div>
<ion-content>
  <!--<div class="search-bar-mask" [ngClass]="{'open':searchPanelFlag}"></div>-->


  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="bubbles" refreshingText="正在刷新...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-searchbar placeholder="输入编码" [(ngModel)]="searchKey" [showCancelButton]="true" cancelButtonText="取消" (ionInput)="searchOnHandler($event)"
    (ionCancel)="searchOnCancel($event)"></ion-searchbar>

  <loading-spinner [isReady]="isReady" [isShow]='isLoading' [isNoData]="!isLoading&&list.length == 0"></loading-spinner>
  <ion-list class="device-list">
    <button ion-item *ngFor="let item of list" (click)="pToDetail(item)"  style="border-bottom: 1px solid #ddd;">
      <ion-avatar item-start>
        <!-- <img src="assets/imgs/scd.jpg"> -->
        <img [src]="baseUrl+item.imagePath">
      </ion-avatar>
      <h2 style="color: #0d96ff;"> {{item?.name | isNullPipe}} </h2>
      <p>{{item.physicalCode}} - {{item.address}}</p>
      <p>
        灯:
        <span style="color: #3baaff;" *ngIf="item?.fanFlag == 0 || item?.fanFlag == 99">{{item?.fanFlag | devPipe:'fanFlag' | isNullPipe}}</span>
        <span style="color: green;" *ngIf="item?.fanFlag == 1">{{item?.fanFlag | devPipe:'fanFlag' | isNullPipe}}</span>
        &nbsp;
        风机:
        <span style="color: #3baaff;" *ngIf="item?.lampFlag == 0 || item?.lampFlag == 99">{{item?.lampFlag | devPipe:'lampFlag' | isNullPipe}}</span>
        <span style="color: green;" *ngIf="item?.lampFlag == 1">{{item?.lampFlag | devPipe:'lampFlag' | isNullPipe}}</span>
        &nbsp;
        虫量:{{item?.bugRate | isNullPipe}}只
      </p>
      <p>{{item?.updateTime | dateFormatPipe:"yyyy-MM-dd hh:mm:ss" | isNullPipe}}&emsp;固件版本:{{item?.version | isNullPipe}}</p>
      <ion-note item-end>{{item.status | devPipe:'status'}}</ion-note>
    </button>
  </ion-list>

  <ion-infinite-scroll *ngIf="!pageObj.isLastPage" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
